import React from 'react'
import PropTypes from 'prop-types';
import { CHANGEALLSTATUS, DELETEALLDONE } from '../../hooks/config'

const Footer = (props) => {
    const { list, dispatch } = props;
    const dones = list.filter(item => item.done == true).length;
    const totals = list.length;
    const changeAllStatus = (e) => {
        dispatch({ type: CHANGEALLSTATUS, payload: e.currentTarget.checked })
    }
    const deleteAllDone = () => {
        dispatch({ type: DELETEALLDONE })
    }
    return (
        <div className='footer-wrapper'>
            <input type='checkbox' onChange={changeAllStatus} checked={totals > 0 && dones == totals} className='form-control' />
            已完成 {dones} / 全部 {totals}
            <button onClick={deleteAllDone}>清除已完成</button>
        </div>
    )
}

Footer.propTypes = {
    list: PropTypes.array.isRequired,
    dispatch: PropTypes.func.isRequired
}

export default Footer